Google Maps JavaScript API 工具｜專案實作

轉職前端遇到的1000個問題 google map

7514 2022-01-10 10:56:42 ‧ 3101 瀏覽

分享至

串接地圖 JavaScript API 中雖然相較起來難度較高，不過官方文件寫的也很簡單易懂。

使用方式

1.宣告 HTML5 文件，將 JS CDN 引入檔案(要先申請金鑰)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>google maps api</title>
    <script async
    src="https://maps.googleapis.com/maps/api/js?key=你的金鑰&callback=initMap">
    </script>
</head>

<body>
    <div id="map"></div>
</body>
</html>

2.設定 map 容器的高度為100%，否則會看不到內容

<style>
    #map {
        height: 100%;
    }

    /* Optional: Makes the sample page fill the window. */
    html,
    body {
        height: 100%;
        margin: 0;
        padding: 0;
    }
</style>

最後，設定地圖呈現的參數

<script>
  let map;

  function initMap() {
      map = new google.maps.Map(document.getElementById("map"), {
        // 中心點位置
        center: { lat: 23.197250366210938, lng: 119.42967987060547 }, 
       
        zoom: 18, // 地圖縮放比例 (0-20)
        maxZoom: 20, // 使用者能縮放地圖的最大比例 
        minZoom: 3, // 使用者能縮放地圖的最小比例
        
        streetViewControl: false, // 是否顯示右下角街景小人
        mapTypeControl: false // 使用者能否切換地圖樣式：一般、衛星圖等
      });
  }
</script>

參考來源：https://developers.google.com/maps/documentation/javascript/overview#maps_map_simple-html